<template>
  <div class="pinglin_box">
    <div class="pinglin_nav">
      <span :class="{active:currentIndex == index}" v-for="(item,index) in nav" :key="item" @click="changeIndex(index)">{{item}}</span>
    </div>
    <section class="comment_section">
        <!-- 短评 -->
      <div class="essay" v-show="currentIndex == 0">
        <div class="comment_header">
          <div class="left">
            <span
              >短评{{
                "(" +
                goodDetail[0].review_list.short[0].summary.total_comment_num +
                ")"
              }}</span
            >
            <span>{{
              "(" +
              goodDetail[0].review_list.short[0].summary.favorable_rate_str +
              ")"
            }}</span>
          </div>
          <div class="right">写短评</div>
        </div>
        <div class="book_user_info_cont">
          <ul class="book_user_info">
            <li
              class="item"
              v-for="(item, index) in goodDetail[0].review_list.short[0].user"
              :key="index"
            >
              <div class="user_info">
                <img :src="item.cust_logo" alt="" />
                <p class="user_name">{{ item.cust_name }}</p>
                <div class="user_score">
                  <div class="stars">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                  <span class="score">10分</span>
                </div>
              </div>
              <div class="use_review">
                <p class="content_text">{{ item.content }}</p>
                <div class="user_control">
                  <div>
                    <span></span>
                    赞
                  </div>
                  <div>
                    <span></span>
                    回复
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="more_btn">
          <div>查看更多短评</div>
        </div>
      </div>

      <!-- 长评 -->
      <div class="long_comment" v-show="currentIndex == 1">
        <div class="comment_header">
          <div class="left">
            <span
              >长评{{
                "(" +
                goodDetail[0].review_list.long[0].summary.long_comment_count +
                ")"
              }}</span
            >
          </div>
        </div>
        <div class="review_comment_title">
          人间至味是沧桑——读王安忆长篇小说《一把刀，千个字》（书评）
        </div>
        <div
          class="user_info"
          v-for="(item, index) in goodDetail[0].review_list.long[0].user"
          :key="index"
        >
          <div class="user_detail">
            <img :src="item.cust_logo" alt="" />
            <p class="userName">{{ item.cust_name }}</p>
          </div>
          <div class="user_score">
            <div class="stars">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
            <span class="score">10分</span>
          </div>
          <div class="user_review_content">
            <p>
              {{ item.content }}
            </p>
          </div>
        </div>
        <div class="user_control">
          <div>
            <span></span>
            赞
          </div>
          <div>
            <span></span>
            回复
          </div>
        </div>
        <div class="more_btn">
          <div>查看更多长评</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  props: ["goodDetail"],
  data() {
    return {
      nav: ["短评", "长评"],
      currentIndex:0,
    };
  },
  methods:{
      changeIndex(index){
          console.log(index);
          this.currentIndex = index;
      }
  }
};
</script>

<style lang="less" scoped>
.pinglin_box {
  width: 100%;
  position: absolute;
  top: 42px;
  .pinglin_nav {
      display: flex;
      font-size: 12px;
      padding: 5px 0;
      background-color: white;
      span{
          flex: 50%;
        text-align: center;
        &:nth-child(1){
            border-right: 1px solid rgba(136, 136, 136, 0.3);
        }
        &.active{
            color: red;
        }
      }
  }
}
.comment_section {
  width: 100%;
  margin-top: 2px;
  box-sizing: border-box;
  div {
    background-color: white;
    &.essay {
      margin-bottom: 10px;
    }
    .comment_header {
      padding: 0px 10px;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      .left {
        span {
          &:nth-child(2) {
            margin-left: 5px;
            color: #ff8186;
          }
        }
      }
      .right {
        font-size: 12px;
        border: 1px solid #ff8186;
        padding: 2px 4px;
        border-radius: 5px;
        color: #ff8186;
      }
    }
    .book_user_info_cont {
      padding: 0px 10px;
      box-sizing: border-box;
      .book_user_info {
        .user_info {
          overflow: hidden;
          img {
            width: 40px;
            border-radius: 20px;
            float: left;
          }
          .user_name {
            font-size: 12px;
            margin-left: 10px;
            float: left;
            line-height: 40px;
          }
        }
        .use_review {
          margin: 10px 0px;
          .content_text {
            font-size: 12px;
            line-height: 1.5;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            word-break: break-all;
          }
        }
      }
    }
    .more_btn {
      display: flex;
      align-items: center;
      justify-content: center;
      div {
        width: 120px;
        height: 36px;
        font-size: 12px;
        text-align: center;
        line-height: 36px;
        color: #ff8186;
        border: 1px solid #ff8186;
        border-radius: 18px;
        margin-bottom: 10px;
      }
    }
    &.long_comment {
      .review_comment_title {
        font-weight: bold;
        padding: 0px 10px;
        box-sizing: border-box;
      }
      .user_info {
        margin: 10px 0;
        position: relative;
        overflow: hidden;
        padding: 0px 10px;
        box-sizing: border-box;
        .user_detail {
          float: left;
          display: flex;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
            border-radius: 40px;
          }
        }
      }
      .user_review_content {
        width: 100%;
        p {
          width: 100%;
          font-size: 12px;
          line-height: 1.5;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          word-break: break-all;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>